﻿    <script type="text/javascript">
        
        // Slider client-side events.
        function onLoadSlider(e) {
            $console.log('Slider loaded.');
        }
        
        function onChangeSlider(e) {
            $console.log("OnChange :: new value is: " + e.value);
        }

        function onSlideSlider(e) {
            $console.log("Slide :: new slide value is: " + e.value);
        }
        
        // RangeSlider client-side events.
        function onLoadRangeSlider(e) {
            $console.log('Range slider loaded.');
        }
        
        function onChangeRangeSlider(e) {
            $console.log("OnChange :: new values are: " + e.values);
        }
        
        function onSlideRangeSlider(e) {
            $console.log("Slide :: new slide value are: " + e.values);
        }

    </script>

    <div class="slider-container">

        <h3>Slider</h3>

	    @(Html.Telerik().Slider<int>()
              .Name("Slider")
              .Value(4)
              .TickPlacement(SliderTickPlacement.None)
              .ClientEvents(events => events
                        .OnLoad("onLoadSlider")
                        .OnChange("onChangeSlider")
                        .OnSlide("onSlideSlider"))
	    )

    </div>

    <div class="slider-container">

        <h3>RangeSlider</h3>

        @(Html.Telerik().RangeSlider<int>()
              .Name("RangeSlider")
              .Values(new int[] { 2, 8 })
              .TickPlacement(SliderTickPlacement.None)
              .ClientEvents(events => events
                        .OnLoad("onLoadRangeSlider")
                        .OnChange("onChangeRangeSlider")
                        .OnSlide("onSlideRangeSlider"))
	  
        )

    </div>

    @Html.Partial("_EventLog")


@section HeadContent {
    <style type="text/css">
        
        .slider-container
        {
            float: left;
            width: 300px;
        }
        
        .event-log-wrap
        {
            clear: left;
            padding-top: 4em;
        }
        
    </style>
}
